<!DOCTYPE HTML>
 <html>

 <head>

 <title>FSS.Berater</title>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width">
 <link rel="stylesheet"
	href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script
	src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>

<!-- references to the local files. Problem: currently the button icons are not shown. -->
<!-- <link rel="stylesheet" href="jquery/jquery.mobile-1.3.1.css" /> -->
<!-- <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> -->
<!-- <script src="jquery/jquery.mobile-1.3.1.js"></script> -->

<script>

		var projectsCache;
		var clickedProject;
		
        $(function() {
 
            $("#callAjax").click(function() {
 
                    $.ajax({
                      type: "POST",
                      url: "Projects",
                      cache: false,
                      dataType: "json",
                      success: onSuccess
                    });
            });
 
            $("#resultLog").ajaxError(function(event, request, settings, exception) {
              $("#resultLog").html("Error Calling: " + settings.url + "<br />HTTP Code: " + request.status);
            });
 
            function onSuccess(data) {
				$("#resultLog").append("<ul id='list' data-role='listview' data-filter='true' data-filter-placeholder='Projekte durchsuchen...' data-inset='true'></ul>");
				projectsCache = data.projects;
				var project;
				var mapUrl;
				var routeUrl;
				var einchecken;
				var auschecken;
				for(var index = 0; index < data.projects.length; index++) {
					project = data.projects[index];
					einchecken = "javascript:checkIn('" + index + "')";
					auschecken = "javascript:checkOut('" + index + "')";
					mapUrl = "http://maps.google.de/maps?q=" + project.city + "%20" + project.name;
					routeUrl = "http://maps.google.de/maps?daddr=" + project.city + "%20" + project.name;
					 
					//$("#list").append("<li><a href=\"javascript:showRightPanel(" + index + ")\">" + data.projects[index].name + "</a></li>");
					//$("#list").append("<li><a id=\"projectLink\" href=\"javascript:setCurProject(" + index + ")\">" + data.projects[index].name + "</a></li>");
					$("#list").append("<div data-role=\"collapsible\" data-inset=\"false\"><h3>" + project.name +
							"</h3><p>" +
								"<a href=\"" + einchecken + "\" data-role=\"button\" data-inline=\"true\" data-mini=\"true\">Einchecken</a>" +
								"<a href=\"" + auschecken + "\" data-role=\"button\" data-inline=\"true\" data-mini=\"true\">Auschecken</a>" +
								"<a href=\"" + mapUrl + "\" data-role=\"button\" data-inline=\"true\" data-mini=\"true\">Karte</a>" +
								"<a href=\"" + routeUrl + "\" data-role=\"button\" data-inline=\"true\" data-mini=\"true\">Route</a>" +
							"</p></div>");
							
				}
				$("#resultLog").trigger("create");
				$("#list").listview('refresh');
            }
			 
// 			 $( document ).on( "vclick", "#list", function() {
// 				 $( this ).append( "<span style='color:#00F;'>vmouseup fired.</span>" );
// 				 $("#resultLog").append("<h1>" + clickedProject + "</h1>");
				 
// 					$("#right-panel").click();
// 					$("#right-panel").trigger("create");
// 					$("#right-panel").refresh();

// 			 });
			 
				//var index = 0;
				//$("#resultLog").append("<p> <h1>" + index + "</h1></p>");

				// Link auf Maps aktualisieren
				//var selProject = projectsCache[index];
				//$("#map").attr("href", "http://maps.google.de/maps?q=" + selProject.city + "%20" + selProject.name);
				
        });

function checkIn(index) {
	alert("Für Projekt " + projectsCache[index].name + " eingecheckt um " + new Date());
}	

function checkOut(index) {
	alert("Für Projekt " + projectsCache[index].name + " ausgecheckt um " + new Date());
}

    </script>

 </head>
 <body>
 <div data-role="page" id="seite1" data-theme="a">
 
	<!-- header -->
	<div data-role="header" data-position="fixed" style="overflow:hidden">
		
		<!--<img border="0" src="appicon.png" alt="FSS.Berater22" class="ui-btn-right" data-inline="true">Zur�ck</img>-->
		<!--<a href="#" data-icon="back" data-theme = "c" data-inline="true"> Zur&uuml;ck </a> -->
		
		<img src="img/appicon2.png" class="ui-btn-right" />
		
		<a href="#" data-iconpos="left" data-icon="back" data-theme="c" > Zur&uuml;ck </a>
		<h1 >FSS.Berater</h1>
	</div>
	 
	 
	 <!-- content -->
	 <div data-role="content" data-theme="a">
	 
          
            <input id="callAjax" type="button" value="Projekte laden..." />
            
		<h3>Projekte</h3>
		<div id="resultLog"></div>

		 <!--<p> <a href="#dialog" data-rel="dialog" data-transition="pop" data-role="button">Dialogbox </a> </p>-->
	 </div>
		 
	 
	 <!-- footer -->
	 <div data-role="footer" data-position="fixed">
		<div data-role="navbar">
			<ul>
				<li><a href="html/createProject.html" data-ajax="false" data-iconpos="left" data-icon="plus" data-theme="c">Projekt anlegen</a></li>
				<li><a href="#seite2" data-iconpos="left" data-icon="refresh" data-theme="c">Aktualisieren</a></li>
				<li><a href="#seite3" data-iconpos="left" data-icon="bars" data-theme="c">Sortieren</a></li>
			</ul>
		</div>
	 </div>

	 <!-- project actions -->
<!-- 	 <div data-role="panel" id="right-panel" data-display="push" data-position="right" data-theme="c"> -->
<!--         <ul data-role="listview" data-theme="d" data-icon="false"> -->
<!--             <li data-icon="delete"><a href="#" data-rel="close">Close</a></li> -->
<!--             <li data-role="list-divider">Share this page</li> -->
<!--             <li><a href="#">Einchecken</a></li> -->
<!--             <li><a href="#">Ausschecken</a></li> -->
<!--             <li><a href="#">Protokoll</a></li> -->
<!--             <li><a id="map" href="javascript:openMap()">Karte</a></li> -->
<!-- 			<li><a href="#">Navigation</a></li> -->
<!--         </ul> -->
<!--     </div> -->
	</div>
 </body>
 </html>